js.merge(config, {});

namespace("playground.creatures.Turtle",
{
	'@inherits' 		 : w3c.HtmlComponent,
	'@stylesheets' :  ["/TurtleCanvas/cdn/css/Turtle.css"],


	initialize : function() {
		this.thumbnail = this.querySelector(".Turtle img");
		application.addEventListener("click", this.moveto.bind(this));
		this.addEventListener("mouseover", this.mouseover.bind(this));
		this.addEventListener("mouseout", this.mouseout.bind(this));
		this.addEventListener("dragselected", this.ondragselected.bind(this), false)
		this.addEventListener("deselected", this.ondeselected.bind(this), false)
	},

	ondragselected : function(e){
		this.addClass("selected")
	},

	ondeselected : function(){
		this.removeClass("selected");
	},

	mouseover : function(){
		if(this.ismoving){return;}
		this.thumbnail.src = "/TurtleCanvas/cdn/images/Turtle.idle.gif";
		this.addClass("hover");
	},

	mouseout : function(){
		if(this.ismoving){return;}
		this.thumbnail.src = "/TurtleCanvas/cdn/images/Turtle.stopped.gif";
		this.removeClass("hover");
	},

	moveto : function(e) {
		if(this.ismoving){return;}
		var self=this;
		this.thumbnail.src = "/TurtleCanvas/cdn/images/Turtle.walking.gif";
		this.ismoving=true;
		this.animate({ "left": e.clientX },
		{
			duration: 6000, //slow turtle
			callback: this.stopped.bind(this)
		})
	},

	stopped : function(){
		this.thumbnail.src = "/TurtleCanvas/cdn/images/Turtle.stopped.gif";
		this.ismoving=false;
	},

	innerHTML:
	'<div class="Turtle" draggable="false">\
		<img draggable="false" id="thumbnail" src="/TurtleCanvas/cdn/images/Turtle.stopped.gif"/>\
		<div class="bubble"></div>\
	</div>'
});
namespace("controls.CheckBox",
{
	'@inherits'		 :  w3c.HtmlComponent,
	"@stylesheets" : ["/" + appconfig.namespace + "/cdn/css/Checkbox.css"],


	initialize : function(){
		console.log(this)
		this.input = this.querySelector('input[type="checkbox"]');
		this.addEventListener("click", this.onClick.bind(this), false);
	},

	canceldrag : function(e){return true;},

	mousedown : function(e){
	},

	onClick : function(e){
		if(this.hasClass("checked")){this.removeClass("checked")}
		else {this.addClass("checked")};
		this.input.checked = this.hasClass("checked");
		this.dispatchEvent(new w3c.CustomEvent("check"), true, true, {target:e.target, checked:e.target.checked});
	},

	oncheck : function(e){
		if(e.eventPhase == 2) {
		}
	},

	value : function(){
		return this.input.checked == true;
	},

	setLabel : function(str){
		if(str) {
			var el = this.querySelector('.label');
			$(el).css("display", "inline-block");
			$(el).html(str);
		}
	},

	innerHTML:
	'<div draggable="false"><span class="indicator"></span><input type="checkbox"/><span class="label" style="display:none;"></span></div>'
});

namespace("controls.Box",
{
	'@inherits' 		 : w3c.HtmlComponent,
	'@stylesheets' :  ["/" + appconfig.namespace + "/cdn/css/Box.css"],
	'@nativednd' : false,
	'@traits'  : [Draggable],


	initialize : function(){
		this.addEventListener("dragstart", 	this.ondragstart.bind(this), 	false);
		this.addEventListener("dragover", 	this.ondragover.bind(this), 	false);
		this.addEventListener("dragenter", 	this.ondragenter.bind(this), false);
		this.addEventListener("drop", 			this.ondrop.bind(this), 		false);
		this.addEventListener("dragend",		this.ondragend.bind(this), 	false);
		this.addEventListener("dragleave",	this.ondragleave.bind(this), false);
		this.addEventListener("drag",			this.ondrag.bind(this), 		false);
		this.addEventListener("dragselected", this.ondragselected.bind(this), false);
		this.addEventListener("dragselected", this.ondragselected2.bind(this), false);



		this.addEventListener("deselected", this.ondeselected.bind(this), false)
	},

	ondragselected : function(e){
		this.addClass("selected");
	},

	ondragselected2 : function(e){
	},

	ondeselected : function(){
		this.removeClass("selected");
	},

	animaterevert : function(){
		return false;
	},

	accepts : function(obj) {
		return !(obj instanceof controls.Box);
	},
	ondragleave : function(e){
		this.removeClass("over");
	},

	ondrag : function(e){
	},

	ondragend : function(e){
		/*jQuery(this.element).css({
			position: "relative",
			top:e.clientY + "px",
			left: e.clientX + "px",
		});*/
	},

	ondragstart : function(e) {
		console.log("box -> " + e.phaseName)
		e.dataTransfer.setData('Text', this.element.getAttribute("cuuid"));
	},

	ondrop : function(e) {
		if (e.preventDefault) {
        }
		console.lof("ondrop")
        return false;
	},

	ondragover : function(e) {
		if(!this.hasClass("over")) { this.addClass("over") }
        if (e.preventDefault) {
        }
        return false;
	},

	ondragenter : function(e) {
       if (e.preventDefault) {
        }
        return false;
	},

	innerHTML:
	'<div class="Box" draggable="true" droppable="false"></div>'
});

namespace("controls.Panel",
{
	'@inherits' : 		w3c.HtmlComponent,
	'@stylesheets' :  ["/" + appconfig.namespace + "/cdn/css/Panel.css"],
	'@nativednd' : false,
	'@traits'  : [Draggable],

	initialize : function(){
		/*var elem = this.element;
		elem.onselectstart = function() { return false; };
	    elem.style.MozUserSelect = "none";
	    elem.style.KhtmlUserSelect = "none";
	    elem.unselectable = "on";*/

		this.addEventListener("dragstart", 	this.ondragstart.bind(this), 	false);
		this.addEventListener("drag", 			this.ondrag.bind(this), 		false);
		this.addEventListener("dragover", 	this.ondragover.bind(this), 	false);
		this.addEventListener("dragenter", 	this.ondragenter.bind(this), false);
		this.addEventListener("dragleave",	this.ondragleave.bind(this), false);
		this.addEventListener("drop", 			this.ondrop.bind(this), 		false);
		this.addEventListener("dragend",		this.ondragend.bind(this), 	false);
	},

	ondragend : function(e){

	},

	ondrag : function(e){
	},

	ondragstart : function(e, src) {
		console.log("panel -> " + e.phaseName)
		e.dataTransfer.setData('Text', this.element.getAttribute("cuuid"));
	},

	ondragleave : function(e){
		this.removeClass("over")
	},

	ondrop : function(e) {
		this.removeClass("over")
		if (e.preventDefault) {
        }
		var cuuid = e.dataTransfer.getData('Text');
		var draggable = $(".Box[cuuid='" + cuuid + "']")[0];
		this.appendChild(draggable);
        return false;
	},

	ondragover : function(e) {
		this.querySelector(".titlebar").innerHTML = ("Mouse Cirection: " + e.location.direction.horizontal + ",  " + e.location.direction.vertical)

		if(!this.hasClass("over")) { this.addClass("over") }
        if (e.preventDefault) {
        }
        return false;
	},

	ondragenter : function(e) {
		console.log("drag enter");
       if (e.preventDefault) {
        }
        return false;
	},

	innerHTML:
	'<div class="Panel" draggable="false" droppable="true" unselectable="on">\
		<div class="titlebar" unselectable="on">title bar</div>\
		<div containment="replace" class="CheckBox" namespace="controls.CheckBox" draggable="false"></div>\
		<div class="shadow"></div>\
	</div>',

	getVal : function(){ return "-50px;" },

	cssText:
	'.Panel .shadow { bottom: <%@ self.getVal() %> }'
});

namespace("TurtleCanvas", /**@lends TurtleCanvas.prototype*/
{
    '@inherits': w3c.Application,
	'@stylesheets' : ["/TurtleCanvas/cdn/css/reset.css", "/TurtleCanvas/cdn/css/resethtml5-1.6.1.css", "/TurtleCanvas/cdn/css/Application.css"],
	'@traits' :[Selectables, LESS],
	'@selectables' : [playground.creatures.Turtle, controls.Box],


	/**
    	Creates a new TurtleCanvas instance
    	@constructs
	*/
    initialize : function () {
		(1).toFixed(-12); // RangeError

    },

	ondragselected : function(e){
		console.log("selected: " + e.target.classname);
	},

	onToggleTurtleMovement : function(e){
		var checkbox  = this.components.checkbox;
		var isChecked = checkbox.value();
	},

    innerHTML:
	'<div class="TurtleCanvas" id="TurtleCanvas">\
		<div containment="replace" id="checkbox" namespace="controls.CheckBox"></div>\
		<div containment="replace" id="turtle" namespace="playground.creatures.Turtle"></div>\
	</div>'
});
